<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>任务维护</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
        rel="stylesheet" />
    <script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
</head>
<style>
    .layui-form-label {
        width: 120px;
    }

    .operation {
        background-color: #d7cccc;
        border-radius: 50%;
        width: 30px !important;
        height: 30px !important;
        text-align: center;
        line-height: 30px;
    }
</style>

<body>
    <div class="layui-fluid box">
        <form class="layui-form" lay-filter="formdata" id="formdata">
            <div class="layui-card">
                <div class="layui-card-body box">
                    <input type="hidden" name="TaskId" value="0" />
                    <input type="hidden" name="RuleId" value="0" />
                    <div class="layui-form-item active">
                        <label class="layui-form-label">任务编号</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="TaskCode" disabled />
                        </div>
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>任务名称</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" name="TaskName" />
                        </div>
                    </div>
                    <div class="layui-form-item active">
                        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>任务类型</label>
                        <div class="layui-input-inline" style="width:540px;">
                            <select name="TaskType" lay-filter="TaskType"></select>
                        </div>
                    </div>
                    <div id="tempdiv">

                    </div>
                </div>
                <input type="hidden" class="layui-input" name="MessageTempContent" />
            </div>
    </div>
    </form>
    </div>
</body>
<script type="text/html" id="temp">
    {{# if(d.model.TaskType==1) { }}
    <div class="layui-form-item active">
        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励积分</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input layui-input2"  name="BonusPoints" value="{{d.model.BonusPoints}}"/>
        </div>
        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励成长值</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input layui-input2" name="BonusGrowth" value="{{d.model.BonusGrowth}}"/>
        </div>
    </div> 
    {{# }else if(d.model.TaskType==2) { }}
    <div class="layui-form-item active">
        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励积分</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input layui-input2" name="BonusPoints" value="{{d.model.BonusPoints}}"/>
        </div>
        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励积分上限</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input layui-input2" name="BonusPointsLimit" value="{{d.model.BonusPointsLimit}}"/>
        </div>
    </div>
    <div class="layui-form-item active">
        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励成长值</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input layui-input2" name="BonusGrowth" value="{{d.model.BonusGrowth}}"/>
        </div>
        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励成长值上限</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input layui-input2" name="BonusGrowthLimit" value="{{d.model.BonusGrowthLimit}}"/>
        </div>
    </div>
    {{# }else if(d.model.TaskType==3) { }}
    <div class="layui-form-item active">
        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>分配方式</label>
        <div class="layui-input-inline" style="width:540px;">
            <select name="RuleType" lay-filter="RuleType">
                {{# layui.each(d.RuleTypeList, function(index, item){ }} 
                {{# if(d.model.RuleType==item.id){ }}
                <option value="{{item.id}}" selected>{{item.text}}</option> 
                {{# }else { }}
                <option value="{{item.id}}">{{item.text}}</option> 
                {{# } }}
                {{# }) }}
            </select>
        </div>
    </div>
        {{# if(d.model.RuleType==1){ }}
        <div class="layui-form-item active">
            <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励积分比例</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input layui-input2" style="display:inline;width: 40%;" name="PointsPercent" value="{{d.model.PointsPercent}}"/><span>  ：</span>
                <input type="text" class="layui-input" style="display:inline;width: 20%;" value="1" disabled/>
            </div>
            <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励成长值比例</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input layui-input2" style="display:inline;width: 40%;"  name="GrowthPercent" value="{{d.model.GrowthPercent}}"/><span>  ：</span>
                <input type="text" class="layui-input" style="display:inline;width: 20%;" value="1" disabled/>
            </div> 
        </div>  
        <blockquote class="layui-elem-quote layui-text">
            奖励比例：多少金额对应1积分或1成长值；例如消费10元奖励1积分或1成长值。
        </blockquote>
        {{# }else if(d.model.RuleType==2) { }}
        <fieldset class="layui-elem-field" style="width: 900px;">
            <legend>金额范围</legend>
            {{# layui.each(d.AmountRange, function(index, item){ }}
            <div class="layui-form-item temp">
                <label class="layui-form-label" style="width: 80px;">起始金额</label>
                <div class="layui-input-inline" style="width: 80px;">
                    <input type="text"  class="layui-input paramvalue layui-input3" value="{{item.StartAmount}}"
                        data-index="{{index}}" data-field="StartAmount"/>
                </div>
                <label class="layui-form-label" style="width: 80px;">结束金额</label>
                <div class="layui-input-inline" style="width: 80px;">
                    <input type="text"  class="layui-input paramvalue layui-input3" value="{{item.EndAmount}}"
                        data-index="{{index}}" data-field="EndAmount"/>
                </div>
                <label class="layui-form-label" style="width: 80px;">奖励积分</label>
                <div class="layui-input-inline" style="width: 80px;">
                    <input type="text"  class="layui-input paramvalue layui-input2" value="{{item.BonusPoints}}"
                        data-index="{{index}}" data-field="BonusPoints"/>
                </div>
                <label class="layui-form-label" style="width: 80px;">奖励成长值</label>
                <div class="layui-input-inline" style="width: 80px;">
                    <input type="text"  class="layui-input paramvalue layui-input2" value="{{item.BonusGrowth}}"
                        data-index="{{index}}" data-field="BonusGrowth"/>
                </div> 
                <div class="operation layui-input-inline add" data-index="{{index}}" >+</div>
                {{# if(index>0){ }}
                <div class="operation layui-input-inline minus" data-index="{{index}}">-</div> 
                {{# } }}
            </div>
            {{# }) }} 
        </fieldset>
        {{# } }} 
    </div>
    {{# }else if(d.model.TaskType==4) { }}
    <div class="layui-form-item active">
        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励积分</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input layui-input2" name="BonusPoints" value="{{d.model.BonusPoints}}"/>
        </div>
        <label class="layui-form-label"><i style="color:red;">*&ensp; </i>奖励成长值</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input layui-input2" name="BonusGrowth" value="{{d.model.BonusGrowth}}"/>
        </div>
    </div> 
    {{# } }}  
</script>

</html>
<script>
    layui.config({
        base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    });

    layui.define(['index', 'layer', 'form', 'element', 'table', 'laydate'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var controller = {
            data: {
                model: {
                    TaskType: 1,
                    RuleType: 1,
                    PointsPercent: '',
                    GrowthPercent: '',
                    BonusPoints: '',
                    BonusPointsLimit: '',
                    BonusGrowth: '',
                    BonusGrowthLimit: ''

                },
                AmountRange: [{
                    StartAmount: '',
                    EndAmount: '',
                    BonusPoints: '',
                    BonusGrowth: ''
                }],
                taskTypeList: [{
                    id: 1,
                    text: '新手任务'
                }, {
                    id: 2,
                    text: '日常任务'
                }, {
                    id: 3,
                    text: '购买消费'
                }, {
                    id: 4,
                    text: '评价晒单'
                }],
                RuleTypeList: [{
                    id: 1,
                    text: '按比例'
                }, {
                    id: 2,
                    text: '金额范围'
                }],
            },
            init: function () {
                var self = this;
                self.data.taskTypeList = parent.taskTypeList;
                self.initselect();
                if (parent.selectdata) {
                    self.data.model = parent.selectdata;
                    self.data.model.PointsPercent = self.data.model.PointsPercent || "";
                    self.data.model.GrowthPercent = self.data.model.GrowthPercent || "";
                    self.data.model.BonusPoints = self.data.model.BonusPoints || "";
                    self.data.model.BonusPointsLimit = self.data.model.BonusPointsLimit || "";
                    self.data.model.BonusGrowth = self.data.model.BonusGrowth || "";
                    self.data.model.BonusGrowthLimit = self.data.model.BonusGrowthLimit || "";
                    form.val("formdata", JSON.parse(JSON.stringify(self.data.model)));
                    self.data.model.RuleType = self.data.model.RuleType || 1;
                    if (self.data.model.RuleType == 2) {
                        self.getAmountRange().then(res => {
                            self.data.AmountRange = res.data;
                            self.inittemp();
                        })
                    } else {
                        self.inittemp();
                    }

                } else {
                    self.gettaskcode();
                    self.inittemp();
                }
                self.initEvent();
            },
            getbaseurl: function (fun) {
                var url = "/lowcode/APP20210728143245471/member/?view=layui&fun=" + fun;
                return url;
            },
            //获取树结构
            initselect: function () {
                var self = this;
                var appendhtml = '';
                self.data.taskTypeList.forEach(x => {
                    appendhtml += '<option  value="' + x.id + '">' + x.text + '</option>'
                });
                $("[name='TaskType']").html(appendhtml)
                form.render("select");
            },
            initdata: function () {
                var self = this;
                self.inittemp();
            },
            //页面加载
            initEvent: function () {
                var self = this;
                form.on('select(TaskType)', function (data) {
                    self.data.model.TaskType = data.value;
                    self.inittemp();
                });
                form.on('select(RuleType)', function (data) {
                    self.data.model.RuleType = data.value;
                    self.inittemp();
                });
                $(document).on("click", ".add", function (e) {
                    self.data.AmountRange.push({
                        StartAmount: '',
                        EndAmount: '',
                        BonusPoints: '',
                        BonusGrowth: ''
                    })
                    self.inittemp();
                })
                $(document).on("click", ".minus", function (e) {
                    var idx = e.currentTarget.dataset.index;
                    if (self.data.AmountRange.length == 1) {
                        layer.msg("需要保留至少一条数据");
                        return;
                    }
                    var temp = self.data.AmountRange;
                    temp.forEach((item, index, arr) => {
                        if (index == idx) {
                            arr.splice(index, 1);
                        }
                    })
                    self.data.AmountRange = temp;
                    self.inittemp();
                })
                // $(document).on("input", ".paramvalue", function (e) {
                //     var index = e.currentTarget.dataset.index;
                //     var field = e.currentTarget.dataset.field;
                //     self.data.AmountRange[index][field] = e.currentTarget.value;
                //     self.inittemp();
                // })
                $(document).on("blur", ".layui-input3", function (e) {
                    var value = e.currentTarget.value;
                    var index = e.currentTarget.dataset.index;
                    var field = e.currentTarget.dataset.field;
                    self.data.AmountRange[index][field] = value;
                    if (!/^\d+(\.\d{1,2})?$/.test(value) && value) {
                        layer.msg("请输入正整数或两位以内小数");
                        $(this).val('');
                        self.data.AmountRange[index][field] = '';
                        return;
                    }
                   
                })
                $(document).on("blur", ".layui-input2", function (e) {
                    var value = e.currentTarget.value;
                    var index = e.currentTarget.dataset.index;
                    var field = e.currentTarget.dataset.field;
                    self.data.AmountRange[index][field] = value;
                    if (!/^\d+?$/.test(value) && value) {
                        layer.msg("请输入正整数");
                        $(this).val('');
                        self.data.AmountRange[index][field] = '';
                        return;
                    }
                })
                parent.getResult = function () {
                    self.data.model = form.val("formdata");
                    if (self.data.model.TaskType == 1) {

                    }
                    if (!self.data.model.TaskName) {
                        layer.msg("任务名称不能为空");
                        return;
                    }
                    var task = {
                        TaskId: self.data.model.TaskId,
                        TaskCode: self.data.model.TaskCode,
                        TaskName: self.data.model.TaskName,
                        TaskType: self.data.model.TaskType,
                        BonusPoints: self.data.model.BonusPoints,
                        BonusPointsLimit: self.data.model.BonusPointsLimit || 0,
                        BonusGrowth: self.data.model.BonusGrowth,
                        BonusGrowthLimit: self.data.model.BonusGrowthLimit || 0,
                        Valid: 1,
                        IsBonusPoints: 1,
                        IsBonusGrowth: 1,
                        WorkId: 1,
                    }
                    var rule = null;
                    if (self.data.model.TaskType == 3) {
                        rule = {
                            RuleId: self.data.model.RuleId || 0,
                            TaskId: self.data.model.TaskId,
                            RuleType: self.data.model.RuleType,
                            PointsPercent: self.data.model.PointsPercent || 0,
                            GrowthPercent: self.data.model.GrowthPercent || 0,
                            EnableStatus: 1,
                            WorkId: 1,
                        }
                    }
                    var amountRange = null;
                    if (self.data.model.RuleType == 2) {
                        amountRange = self.data.AmountRange;
                    }
                    if (task.TaskType == 1 || task.TaskType == 4) {
                        if ((task.BonusPoints || 0) == 0) {
                            layer.msg("奖励积分不能为空");
                            return;
                        }
                        if ((task.BonusGrowth || 0) == 0) {
                            layer.msg("奖励成长值不能为空");
                            return;
                        }
                    } else if (task.TaskType == 2) {
                        if ((task.BonusPoints || 0) == 0) {
                            layer.msg("奖励积分不能为空");
                            return;
                        }
                        if ((task.BonusGrowth || 0) == 0) {
                            layer.msg("奖励成长值不能为空");
                            return;
                        }
                        if ((task.BonusPointsLimit || 0) == 0) {
                            layer.msg("奖励积分上限不能为空");
                            return;
                        }
                        if ((task.BonusGrowthLimit || 0) == 0) {
                            layer.msg("奖励成长值上限不能为空");
                            return;
                        }
                        if (parseInt(task.BonusPoints) > parseInt(task.BonusPointsLimit)) {
                            layer.msg("奖励积分不能大于上限值");
                            return;
                        }
                        if (parseInt(task.BonusGrowth) > parseInt(task.BonusGrowthLimit)) {
                            layer.msg("奖励成长值不能大于上限值");
                            return;
                        }

                    } else if (task.TaskType == 3) {
                        if (rule.RuleType == 1) {
                            if ((rule.PointsPercent || 0) == 0) {
                                layer.msg("奖励积分比例不能为空");
                                return;
                            }
                            if ((rule.GrowthPercent || 0) == 0) {
                                layer.msg("奖励成长值比例不能为空");
                                return;
                            }
                        } else if (rule.RuleType == 2) {
                            for (var i = 0; i < amountRange.length; i++) {
                                var a = amountRange[i];
                                if ((a.StartAmount || 0) == 0 ||
                                    (a.EndAmount || 0) == 0 ||
                                    (a.BonusPoints || 0) == 0 ||
                                    (a.BonusGrowth || 0) == 0
                                ) {
                                    layer.msg("金额范围值不能为空");
                                    return;
                                }
                                if (parseFloat(a.StartAmount) > parseFloat(a.EndAmount)) {
                                    layer.msg("初始金额不能大于结束金额");
                                    return;
                                }
                            }
                        }

                    }
                    return {
                        task: task,
                        rule: rule,
                        rangeList: amountRange
                    };
                }
            },
            //初始化模板
            inittemp: function () {
                var self = this;
                var getTpl = temp.innerHTML
                    , view = document.getElementById('tempdiv');
                laytpl(getTpl).render({
                    model: self.data.model,
                    AmountRange: self.data.AmountRange,
                    RuleTypeList: self.data.RuleTypeList
                }, function (html) {
                    view.innerHTML = html;
                    form.render();
                });
            },
            gettaskcode: function () {
                var self = this;
                admin.req({
                    url: self.getbaseurl("task.gettaskcode"),
                    method: "get",
                    data: {},
                    done: res => {
                        $("[name='TaskCode']").val(res.data.TaskCode);
                    }
                });
            },
            getAmountRange: function () {
                var self = this;
                return new Promise((resolve, reject) => {
                    admin.req({
                        url: self.getbaseurl("task.getAmountRange"),
                        method: "get",
                        data: { ruleId: self.data.model.RuleId },
                        done: res => {
                            resolve(res);
                        }
                    });
                })
            }
        }

        controller.init();
    });
</script>